<template>
	<!--经济运行情况监测-->
	<div class="economic-monitoring">
		<el-row style="height:100%">
			<el-col span="7" style="height:100%">
				<chart-block chartID="chart1" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="27vh"></chart-block>
				<chart-block chartID="chart2" :title="singleLineOptionData.title" :optionData="singleLineOptionData" chartType="getSingleLine" style="margin-top:1.1vh" height="27vh"></chart-block>
				<chart-block chartID="chart3" :title="BarAndLineOptionData.title" :optionData="BarAndLineOptionData" chartType="getBarAndLine" style="margin-top:1.1vh" height="27vh"></chart-block>
			</el-col>
			<el-col span="10">
				<div class="center-text">
					<p>重庆市{{ gdpList.year }}年实现生产总值{{ gdpList.sczz }}{{ gdpList.sczzUnit }}</p>
					<p>一产增加值{{ gdpList.dycyzjz }}{{ gdpList.sczzUnit }}；二产增加值{{ gdpList.decyzjz }}{{ gdpList.sczzUnit }}；三产增加值{{ gdpList.dscyzjz }}{{ gdpList.sczzUnit }}。</p>
				</div>
				<div class="total-data">
					<div class="total-data-div">
						<img src="../../assets/images/finance02.png" alt="">
						<div class="total-data-text">
							<p>生成总值</p>
							<p class="generate_total">{{ gdpList.ljsczz }} <span>{{ gdpList.sczzUnit }}</span></p>
						</div>
					</div>
					<div class="total-data-div">
						<img src="../../assets/images/finance03.png" alt="">
						<div class="total-data-text">
							<p>财政收入</p>
							<p class="finance">{{ gdpList.ljczsr }} <span>{{ gdpList.czsrUnit }}</span></p>
						</div>
					</div>
					<div class="total-data-div noBorder">
						<img src="../../assets/images/finance04.png" alt="">
						<div class="total-data-text">
							<p>零售总额</p>
							<p class="resale">{{ gdpList.ljlsze }} <span>{{ gdpList.lszeUnit }}</span></p>
						</div>
					</div>
				</div>
				<div class="commodity-info">
					<p>商品房销售面积{{ gdpList.spfxsmj }}{{ gdpList.mjUnit }}</p>
				</div>
				<bashi-map :map-data="mapData" style="height:65vh"></bashi-map>
			</el-col>
			<el-col span="7">
				<chart-block chartID="chart4" height="27vh" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getPictorialBar"></chart-block>
				<chart-block chartID="chart5" height="27vh" :title="lineOptionData.title" :optionData="lineOptionData" chartType="getLine" style="margin-top:1.1vh"></chart-block>
				<chart-block chartID="chart6" height="27vh" :title="barOptionData.title" :optionData="barOptionData" chartType="getStackBar" style="margin-top:1.1vh"></chart-block>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import {getCommonData10} from '@/api/pages.js'

export default {
	name: "economic-monitoring",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		BashiMap: () => import('@/components/map/bashi-map')
	},
	props: {},
	data() {
		return {
			optionData: {
				title: '',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				color: ["#03cefa", "#fd664d", "#f1db25"],
			},
			mapData: {
				mapData: [],
				effectData: [],
				scatterData: [],
			},
			// stackBarShow: false,
			BarAndLineOptionData: {
				title: '',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#47eaf9',
						bottomColor: '#0693d5'
					},
				],
				LineCircleColor: "#eae73c",//折线图颜色
				LineCircleBorderColor: "#eae73c",//折线图描边颜色
			},
			// BarAndLineOptionDataShow: false,
			pictorialBarOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#3af5c4',
						bottomColor: '#43eb84'
					},
				],
			},
			// pictorialBarOptionDataShow: false,
			lineOptionData: {
				statisticsNumber: [{
					dxgmysqysl: "", gmysqysl: "", xxgmysqysl: "", zxgmysqysl: "",
				}],
				color: ['#32e9f4', '#f1db25', '#fc684b'],
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
			},
			// lineOptionDataShow: false,
			barOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					// {
					// 	name: '', //如果有图例，这个就不能为空
					// 	data: [], //数据
					// 	unit: '', //数据的单位
					// },
				],
				color: ["#03cefa", "#fd664d", "#f1db25"],
			},
			// barOptionDataShow: false,
			singleLineOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//渐变色
					{ //折线图两侧竖线数据渐变色
						topColor: "rgba(92, 210, 254,1)",
						bottomColor: "rgba(92, 210, 254, 0)"
					},
					{//折线图填充区域渐变色
						topColor: "rgba(105, 209, 239,.2)",
						bottomColor: "rgba(105, 209, 239, 0)"
					},
				],
				LineCircleColor: "#14d0e1",//折线图颜色
				LineCircleBorderColor: "#14d0e1",//折线图描边颜色
			},
			// singleLineOptionDatashow: false,
			gdpList: {}
		}
	},
	computed: {},
	created() {
		this.getTotalOutputValue()
		this.getTotalIndustrialOutputValue()
		this.getEmployedPopulation()
		this.getFiscalRevenue()
		this.getBusinessData()
		this.getForeignTrade()
		this.getMapData()
		this.getGdp()
		this.getBusinessDataText()
	},
	mounted() {
	},
	methods: {
		getGdp() {
			getCommonData10({busiCode: 'C005'}).then(res => {
				if (res.data.code === 200) {
					this.gdpList = res.data.data.list[0]
				}
			}).catch(err => {
			})
		},
		//地图展示（最近一年各个区域的生产总值）
		getMapData() {
			getCommonData10({busiCode: 'C006'}).then(res => {
				if (res.data.code === 200) {
					res.data.data.list.forEach((item, index) => {
						// let symbolSize = 0
						// symbolSize = Number(item.sczz) / 20000 > 30 ? 30 : Number(item.sczz) / 20000
						this.mapData.mapData.push({
							name: item.areaName,
							value: item.sczz,
							unit: item.unit
						})
						if (item.areaName === '石河子市') {
							this.mapData.effectData.push({
								name: item.areaName,
								value: [item.longtitude, item.latitude, item.sczz, item.size],
								unit: item.unit
							})
						} else {
							this.mapData.scatterData.push({
								name: item.areaName,
								value: [item.longtitude, item.latitude, item.sczz, item.size],
								unit: item.unit
							})
						}
					})
				}
			}).catch(err => {
			})
		},
		//生产总值
		getTotalOutputValue() {
			getCommonData10({busiCode: 'E005'}).then(res => {
				if (res.data.code === 200) {
					this.optionData.title = res.data.data.title
					this.optionData.categoryAxis = res.data.data.categoryAxis
					this.optionData.seriesData = res.data.data.seriesData
					// this.stackBarShow = true
				}
			}).catch(err => {
			})
		},
		//工业总产值
		getTotalIndustrialOutputValue() {
			getCommonData10({busiCode: 'E006'}).then(res => {
				if (res.data.code === 200) {
					this.singleLineOptionData.title = res.data.data.title
					this.singleLineOptionData.categoryAxis = res.data.data.categoryAxis
					//折线图两侧竖线
					let seriesData1 = []
					res.data.data.seriesData[0].data.forEach((item, index) => {
						if (index === 0 || index === res.data.data.seriesData[0].data.length - 1) {
							seriesData1.push(item)
						} else {
							seriesData1.push(0)
						}
					})
					this.singleLineOptionData.seriesData[0] = {data: seriesData1}
					this.singleLineOptionData.seriesData[1] = res.data.data.seriesData[0]
					// this.singleLineOptionDatashow = true
				}
			}).catch(err => {
			})
		},
		//就业人口
		getEmployedPopulation() {
			getCommonData10({busiCode: 'E007'}).then(res => {
				if (res.data.code === 200) {
					this.BarAndLineOptionData.title = res.data.data.title
					this.BarAndLineOptionData.categoryAxis = res.data.data.categoryAxis
					this.BarAndLineOptionData.seriesData = res.data.data.seriesData
					// this.BarAndLineOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//财政收入
		getFiscalRevenue() {
			getCommonData10({busiCode: 'E008'}).then(res => {
				if (res.data.code === 200) {
					this.pictorialBarOptionData.title = res.data.data.title
					this.pictorialBarOptionData.categoryAxis = res.data.data.categoryAxis
					this.pictorialBarOptionData.seriesData = res.data.data.seriesData
					// this.pictorialBarOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//规模以上企业数据（折线图）
		getBusinessData() {
			getCommonData10({busiCode: 'E009'}).then(res => {
				if (res.data.code === 200) {
					this.lineOptionData.title = res.data.data.title
					this.lineOptionData.categoryAxis = res.data.data.categoryAxis
					this.lineOptionData.seriesData = res.data.data.seriesData
				}
			}).catch(err => {
			})
		},
		//规模以上企业数据（文字）
		getBusinessDataText() {
			getCommonData10({busiCode: 'C007'}).then(res => {
				if (res.data.code === 200) {
					this.lineOptionData.statisticsNumber = res.data.data.list
					// this.lineOptionDataShow = true
				}
			}).catch(err => {
			})
		},
		//对外贸易
		getForeignTrade() {
			getCommonData10({busiCode: 'E010'}).then(res => {
				if (res.data.code === 200) {
					this.barOptionData.title = res.data.data.title
					this.barOptionData.categoryAxis = res.data.data.categoryAxis
					this.barOptionData.seriesData = res.data.data.seriesData
					console.log(this.barOptionData)
					// this.barOptionDataShow = true
				}
			}).catch(err => {
			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.economic-monitoring {
	width: 100%;
	height: 100%;
	padding: 7vh 1.3vw 1.85vh;

	.center-text {
		color: #b0e9f9;
		text-align: center;
		font-weight: bold;
		font-size: 1.15vw;
		text-shadow: 0.2vw 0 .3vw rgba(42, 172, 247, 0.5), -.2vw 0vw .3vw rgba(42, 172, 247, 0.5), 0vw .2vw .3vw rgba(42, 172, 247, 0.5), 0vw -.2vw .3vw rgba(42, 172, 247, 0.5);
	}

	.total-data {
		display: flex;
		justify-content: center;
		background: url("../../assets/images/center_total_bg.png") top center no-repeat;
		background-size: 100% 100%;
		margin-top: 1vh;
		padding: 1.2vh 0;
		margin: 0 1.5vw;

		.total-data-div {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			// padding: 0 2.5vw;
			border-right: 1px solid rgba(1, 137, 232, 0.7);

			img {
				//padding-right: 0.5vw;
				width: 3.7vw;
				animation: turn 10s linear infinite;
				transform-origin: center center;
				// height: 6.7vh;
			}

			.total-data-text {
				padding-left: 0.5vw;
				color: #FFF;
				font-weight: bold;
				font-size: 0.7vw;
				white-space: nowrap;

				.generate_total {
					color: #f7e303;
					font-size: 1.3vw;

					span {
						font-size: 0.9vw;
					}
				}

				.finance {
					color: #3ee2e4;
					font-size: 1.3vw;

					span {
						font-size: 0.9vw;
					}
				}

				.resale {
					color: #3ee465;
					font-size: 1.3vw;

					span {
						font-size: 0.9vw;
					}
				}
			}
		}

		.noBorder {
			border: 0;
		}
	}

	.commodity-info {
		font-size: 0.85vw;
		font-weight: bold;
		color: #3ee465;
		float: right;
		margin-top: 0.8vh;
		padding-right: 1vw;
	}
}

@keyframes turn {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
